import React from "react";
import { connect } from "react-redux";
import { addTodo } from "../actions";
import { Button, Input } from 'antd';
const Search = Input.Search;

const AddTodo = (props) => {
	console.log(props);
	return (
		<div style={{paddingBottom: 20}}>
			<Button type="primary" onClick={() => props.routerClick(1)}>xxx</Button>
			<Search
				style={{ width: 200 }}
				placeholder="input search text"
				onSearch={value => props.onClick(value)}
				enterButton
			/>
			{
				props.todos.map(it => {
					return <div key={it.id}>id: {it.id} - text: {it.text}</div>;
				})
			}
		</div>
	);
};

const mapStateToProps = (state, ownProps) => ({
	todos: state.todos
});

const mapDispatchProps = (dispatch, ownProps) => ({
	onClick: (text) => dispatch(addTodo(text))
});

export default connect(
	mapStateToProps,
	mapDispatchProps
)(AddTodo);
